<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      title="相关客户"
      :visible.sync="visible"
      width="60%"
      :append-to-body="true"
      @closed="reset"
    >
      <div class="page">
        <lb-table
          ref="lbTable"
          v-loading="$loadingPlugin.fetchData"
          border
          height="550px"
          element-loading-text="加载中"
          :column="tableData.column"
          :data="tableData.data"
          pagination
          :total="tableData.total"
          custom-column
          :immediate-fetch="false"
          @fetch="fetchData"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { customerselectYYZHList } from '@/api'
  import { formatColumnMap, parseTime } from '@/utils'
  //   import { mapGetters } from 'vuex'
  //   import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'

  export default {
    components: {

    },
    props: {
      groupTypeMap: {
        type: Array,
        default: []
      },
      csmTypeMap: {
        type: Array,
        default: []
      },
      csmStatusMap: {
        type: Array,
        default: []
      },
      subTypeAllList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        visible: false,
        temp: {},
        tableData: {
          data: [],
          total: 0,
          column: [
            {
              type: 'index'
            },
            {
              prop: 'groupCode',
              label: '组号',
              align: 'center'
              // render: (h, { row }) => (<span style={row.configName !== row.beforeConfigName ? 'color:red;' : ''}>{row.configName}</span>)
            },
            {
              prop: 'groupType',
              label: '组类型',
              render: (h, { row }) => <span>{row.groupType ? formatColumnMap(this.groupTypeMap, 'value', row.groupType, 'desc') : ''}</span>
            },
            {
              prop: 'csmCode',
              label: '客户编号',
              width: 105
              // render: (h, { row }) => <el-link underline={false} onClick={() => this.openCsmDetail(row)}>{row.csmCode}</el-link>
            },
            {
              prop: 'csmName',
              label: '客户名称',
              showOverflowTooltip: true
            },
            {
              prop: 'sfzh',
              width: 200,
              label: '身份证号'
            },
            {
              prop: 'csmStatus',
              label: '客户状态',
              render: (h, { row }) => <span>{ row.csmStatus && formatColumnMap(this.csmStatusMap, 'value', row.csmStatus, 'desc') }</span>
            },
            {
              prop: 'cardNoBus',
              label: '营业执照',
              showOverflowTooltip: true
            },
            {
              prop: 'groupStatus',
              label: '状态',
              render: (h, { row }) => <span>{ row.groupStatus === 1 ? '作废' : '正常' }</span>
            },
            {
              prop: 'csmType',
              label: '客户类型',
              render: (h, { row }) => <span>{ row.csmType && formatColumnMap(this.csmTypeMap, 'value', row.csmType, 'desc') }</span>
            },
            {
              prop: 'subType',
              label: '用气性质',
              width: 110,
              render: (h, { row }) => <span>{ row.subType ? formatColumnMap(this.subTypeAllList, 'value', row.subType, 'label') : ''}</span>
            },
            {
              prop: 'nearStationName',
              width: 150,
              label: '所属机构'
            },
            {
              prop: 'csmRgPhone',
              width: 110,
              label: '联系电话'
            },
            {
              prop: 'csmRgAddress',
              width: 200,
              label: '地址'
            //   render: (h, { row }) => <span >
            //   <span class='point-span' onClick={() => this.getMap(row)}>{this.$permission(8) && <i class='el-icon-location linkColor' style='cursor: pointer;'/>}</span>{ row.csmRgAddress }
            // </span>
            },
            {
              prop: 'createTime',
              label: '开户日期',
              showOverflowTooltip: true,
              render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            }
          ]
        }
      }
    },
    computed: {
    },
    watch: {

    },
    mounted() {

    },
    destroyed() {

    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = temp
            this.fetchData({ currentPage: 1, pageSize: 20 })
          }
        })
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          cardNo: this.temp.zzbh,
          currentPage,
          pageSize
        }
        const res = await customerselectYYZHList(query)
        this.tableData.data = res.data.rows
        this.tableData.total = res.data.total
        // console.log(this.tableData.data)
      },
      reset() {

      }
    }
  }
</script>

<style lang='scss' scoped>

</style>
